const local = new localData(); //创建本地储存实例
const KEY = `md5-01769c94d4b80fc19bddf61a94318a08`; //用于本地储存的键值
const LOCALDATA = local.getData(KEY); //获取本地储存的捐款数据
//生成创建每一个捐款项目的方法
const createItem = (function() {
    //数组排序是ID从大到小的，所以新生成的ID应该从数组头开始增长
    let itemId = LOCALDATA.length ? LOCALDATA[0].id : 0;
    return function(options) {
        options.id = ++itemId;
        const item = new Item(options);
        return item;
    }
})();

class Item {
    //捐款信息对象类
    constructor(options) {
        this.id = options.id; //对象的唯一标识
        this.donater = options.donater; //捐款人
        this.dist = options.dist; //捐款地区
        this.money = options.money; //捐款金额
        this.date = options.date; //捐款日期
    }
}

function resetInfo(data) {
    //将data清空
    for (propertys in data) {
        data[propertys] = ``;
    }
    data[`selected`] = 1;
}
//添加捐款信息的方法
function addList(data) {
    const item = {
            donater: data.donater,
            date: data.date,
            money: data.money,
            dist: { name: this.districts[data.selected].name, value: data.selected },
        }
        //必要数据不为空则将新的捐款信息添加进捐款列表中
    if (isComplete(item)) {
        this.donateItems.unshift(createItem(item));
        //将最新的数据存进本地储存
        local.saveData(KEY, this.donateItems);
        //将新增捐款栏重置
        resetInfo(data);

    } else alert(`请输入完整的数据!`);
}
//检验目标对象关键属性是否完整的方法
function isComplete(target) {
    return target.donater.trim() && target.date.trim() && target.money.trim() && target.dist.name.trim();
}
//用来刷新页面显示数组的方法
function updateList(val) {
    //val是表示当前选中的受捐地区
    if (!val) { //val为0的话说明显示全部受捐地区
        this.displayList = this.donateItems;
    } else {
        this.displayList = [];
        for (let item of this.donateItems) {
            if (item.dist.value === val)
                this.displayList.push(item);
        }
    }
    // 当更新了表格显示数组后，将当前页重置为第一页
    this.currentPage = 1;
}
const PAGESIZE = 3; //将页容量设置为3
//创建vue根实例
const vm = new Vue({
    el: `#main`,
    data: {
        //捐款信息
        donateItems: LOCALDATA,
        //用来显示在表格中的数组
        displayList: LOCALDATA,
        //捐款地区
        districts: [{ name: `全部地区`, value: 0 }, { name: `新乡`, value: 1 }, { name: `郑州`, value: 2 }, { name: `南阳`, value: 3 }, { name: `商丘`, value: 4 }, { name: `开封`, value: 5 }, { name: `洛阳`, value: 6 }],
        //用于修改的临时对象
        tempData: { donater: ``, dist: {}, money: ``, date: `` },
        //当前页
        currentPage: 1,
        //页容量
        pageSize: PAGESIZE,
        //当前选择的区域 0代表全部 
        currentDist: 0,
        //显示状态 0正常显示 其他数字代表当前正在修改的序号
        displayState: 0
    },
    watch: {
        donateItems: function() {
            // 当捐款信息改变时，需要更新显示列表
            updateList.call(this, this.currentDist);
        },
        currentDist: function(val) {
            // 当当前选择的地区发生变化时，需要更新显示列表
            updateList.call(this, val);
        }
    },
    computed: {
        //计算当前显示数据所需要的总页数
        totalPage() {
            //显示数据的数组长度/页面容量向上取整即总页数
            // 如果总页数为0，默认显示1
            const total = Math.ceil(this.displayList.length / this.pageSize) || 1;
            // 当删除数据使总页数减少一页时，当前页如果刚好在最后一页，则将当前页退到总页数位置
            if (this.currentPage > total) this.currentPage = total;
            return total;
        },
    },
    methods: {
        //添加新数据的方法
        add: addList,
        //修改数据的方法
        modifyData(index) {
            this.changeState(index);
            for (prop in this.displayList[index]) {
                this.tempData[prop] = this.displayList[index][prop];
            }
        },
        //监听selectBox组件值发生变化的方法
        selChange(value) {
            this.tempData.dist = this.districts[value];
        },
        //改变显示状态的方法
        changeState(index) {
            this.displayState = this.displayState ? 0 : index + 1;
        },
        //删除数据的方法
        delData(id) {
            const dataIndex = this.donateItems.findIndex(ele =>
                ele.id === id
            );
            this.donateItems.splice(dataIndex, 1);
            local.saveData(KEY, this.donateItems);
        },
        //根据页数显示数据的方法
        inShow: function(index) {
            return index <= this.currentPage * this.pageSize && index > (this.currentPage - 1) * this.pageSize;
        },
        //向上翻页
        prev(n) {
            this.currentPage -= n;
        },
        //向下翻页
        next(n) {
            this.currentPage += n;
        },
        //改变当前显示地区
        changeDist(dist) {
            this.currentDist = dist;
        },
        //保存更改的方法
        confirm(index) {
            if (!isComplete(this.tempData)) return alert(`请输入完整的信息！`);
            for (prop in this.displayList[index]) {
                this.displayList[index][prop] = this.tempData[prop];
            }
            local.saveData(KEY, this.donateItems);
            this.changeState(index);
        },
        //撤销更改的方法
        cancel(index) {
            this.changeState(index);
        }
    },
    //注册组件
    components: {
        'search-box': searchBox,
        'add-box': addBox,
        'select-box': selectBox,
    }
});